<script setup lang="ts" name="CCParentPage_Mitt">
import { onUnmounted, ref } from "vue";
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";
import emitter from "../../../utils/emitter";

const car = ref("大本");
const toy = ref<string>();
const book = ref<string>();

emitter.on("send-toy", (v: string) => {
  toy.value = v;
});
emitter.on("send-book", (v: string) => {
  book.value = v;
});

onUnmounted(() => {
  emitter.off("send-book");
  emitter.off("send-toy");
});
</script>

<template>
  <div class="bg-sky-100 p-6">
    <h2 class="text-xl">父组件</h2>
    <div>车：{{ car }}</div>
    <div v-if="toy">子组件的玩具：{{ toy }}</div>
    <div v-if="book">子组件的图书：{{ book }}</div>
    <div>
      <button class="px-1 py-0.5 border bg-gray-50" @click="emitter.emit('send-car', car)">
        共享车
      </button>
    </div>
    <Child1 />
    <Child2 />
  </div>
</template>
